<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    function changeAttribute() {
        var elementById = document.getElementById("name");
        elementById.value = "嗨"
    }

    function changeColor() {
        var elementById = document.getElementById("name");
        elementById.style.color = "yellow";
        elementById.style.borderRadius = "5px";
    }
    function changeText() {
        var elementById = document.getElementById("div1");
        elementById.innerText = "嗨"
        elementById.innerHTML = "<h1>嗨</h1>"
    }
</script>
<style>
    #name {
        color: red;
    }
</style>
<body>
<!--
  1.操作属性，改变其内容
  2.操作样式，改变其样式
  3.操作文本，改变其文本内容
-->

<input id="name" type="text" value="hello"><br>
<div id = "div1" >
    hello world
</div>
<button onclick="changeAttribute()">操作属性</button>
<br>
<button onclick="changeColor()">改变颜色</button>
<br>
<button onclick="changeText()">改变内容</button>
</body>
</html>